<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src {{cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}';">
    <link href="{{styleUri}}" rel="stylesheet" />
    <title>Git Commander Pro</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Git Commander Pro</h1>
            <p>Current Branch: <span id="current-branch-display">...</span> <span id="branch-sync-status"></span></p>
        </div>
        <div class="tabs">
            <button id="tab-workspace" class="tab-button active">Workspace</button>
            <button id="tab-history" class="tab-button">History</button>
            <button id="tab-branches" class="tab-button">Branches</button>
            <button id="tab-stash" class="tab-button">Stash</button>
        </div>

        <!-- Workspace Content -->
        <div id="content-workspace" class="tab-content">
            <div id="no-changes-message" style="display: none;">The working directory is clean.</div>
            <table class="file-list">
                <thead>
                    <tr>
                        <th>File Path</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="files-list">
                    <!-- File rows will be inserted here -->
                </tbody>
            </table>
            <div class="workspace-actions">
                <div class="commit-area">
                    <div class="commit-tags">
                        <button class="tag-button" data-tag="feat">feat</button>
                        <button class="tag-button" data-tag="fix">fix</button>
                        <button class="tag-button" data-tag="docs">docs</button>
                        <button class="tag-button" data-tag="style">style</button>
                        <button class="tag-button" data-tag="refactor">refactor</button>
                        <button class="tag-button" data-tag="perf">perf</button>
                        <button class="tag-button" data-tag="ci">ci</button>
                        <button class="tag-button" data-tag="test">test</button>
                        <button class="tag-button" data-tag="chore">chore</button>
                    </div>
                    <textarea id="commit-message" placeholder="Commit message..."></textarea>
                </div>
                <div class="main-buttons">
                    <button id="commit-button" class="primary">Commit</button>
                    <button id="commit-push-button">Commit & Push</button>
                    <button id="stash-all-button">Stash All</button>
                    <button id="discard-all-button">Discard All</button>
                </div>
            </div>
        </div>

        <!-- History Content -->
        <div id="content-history" class="tab-content" style="display: none;">
            <div id="no-history-message" style="display: none;">No commit history found.</div>
            <table class="file-list">
                <thead>
                    <tr>
                        <th>Hash</th>
                        <th>Author</th>
                        <th>Date</th>
                        <th>Message</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="history-list">
                    <!-- History rows will be inserted here -->
                </tbody>
            </table>
        </div>

        <!-- Branches Content -->
        <div id="content-branches" class="tab-content" style="display: none;">
            <div class="branch-actions">
                <button id="create-branch-button">New Branch</button>
                <button id="pull-button">Pull</button>
            </div>
            <h2>Local Branches</h2>
            <ul id="local-branches-list" class="branch-list"></ul>
            <h2>Remote Branches</h2>
            <ul id="remote-branches-list" class="branch-list"></ul>
        </div>

        <!-- Stash Content -->
        <div id="content-stash" class="tab-content" style="display: none;">
            <div id="no-stashes-message" style="display: none;">No stashed changes found.</div>
             <table class="file-list">
                <thead>
                    <tr>
                        <th>Ref</th>
                        <th>Message</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="stash-list">
                    <!-- Stash rows will be inserted here -->
                </tbody>
            </table>
        </div>
    </div>
    <script nonce="{{nonce}}" src="{{scriptUri}}"></script>
</body>
</html> 